<template>
    <div>
        <el-main class="main">
            <!-- 多条件输入框 -->
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item label="领料单编号">
                    <el-select v-model="formData.leadid" placeholder="选择商品" style="width: 180px">
                        <el-option v-for="item in name" :key="item.id" :label="item.no" :value="item.id">
                        </el-option>
                    </el-select></el-form-item>
                <el-form-item label="次品入库单编号">
                    <el-input v-model="formData.no" placeholder="" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="入库数量≥">
                    <el-input v-model="formData.num" placeholder="" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="损耗率≤">
                    <el-input v-model="formData.attirtionRate" placeholder="" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="次品名称">
                    <el-input v-model="formData.goodsid" placeholder="" style="width: 180px"></el-input>
                </el-form-item>
                <el-form-item label="次品仓库">
                    <el-select v-model="formData.storehouseid" placeholder="请选择" style="width: 180px">
                        <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formData.status" placeholder="请选择" style="width: 180px">
                        <el-option label="已审批" value="2"></el-option>
                        <el-option label="未审批" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 按钮 -->
                <el-button type="primary" @click="find">查询</el-button>
                <el-button type="warning" @click="empty">重置</el-button>
            </el-form>
            <el-col style="text-align: left">
                <el-button type="primary" @click="dialogVisible = true">添加次品入库单</el-button>
            </el-col>
            <!-- 列表 -->
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="leadid" label="领料单编号" width="180">
                </el-table-column>
                <el-table-column prop="no" label="入库单编号" width="180">
                </el-table-column>
                <el-table-column prop="name" label="次品名称" width="180">
                </el-table-column>
                <el-table-column prop="num" label="次品入库数量" width="180">
                </el-table-column>
                <el-table-column prop="unitid" label="单位" width="180">
                    <template slot-scope="scope">
                        {{ getUnitName(scope.row.unitid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="attritionRate" label="损耗率" width="180">
                </el-table-column>
                <el-table-column prop="storehouseid" label="领料仓库" width="180">
                    <template slot-scope="scope">
                        {{ getWarehouseName(scope.row.storehouseid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="employeeid" label="管理员" width="180">
                    <template slot-scope="scope">
                        {{ getEmployeeName(scope.row.employeeid) }}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否审核" width="180">
                    <template slot-scope="scope">
                        <template v-if="scope.row.status == '1'">
                            {{ '已审核' }}
                        </template>
                        <template v-if="scope.row.status == '0'">
                            {{ '未审核' }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" type="primary" plain
                            @click="edit(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.status == 0" type="danger" plain
                            @click="deleteItem(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.status == 0" type="success" plain
                            @click="pass(scope.row)">审核</el-button>
                        <el-button v-if="scope.row.status == 1" type="info" plain>已审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-sizes="[5, 10]" :page-size="size"
                    layout=" prev, pager, next, jumper,total, sizes" :total="total">
                </el-pagination>
            </el-row>

            <!-- 添加表单 -->
            <el-dialog title="添加次品入库单" :visible.sync="dialogVisible" width="28%">
                <div>
                    <el-form label-width="80px" :model="formData">
                        <el-form-item label="领料单编号">
                            <el-select v-model="formData.no" clearable placeholder="请选择"
                                style="width: 320px; text-align: left;" @change="changeing">
                                <el-option v-for="item in name" :key="item.id" :label="item.no" :value="item.no">
                                </el-option>
                            </el-select>
                            <p>当前领料单的总重量为{{ allWeight }},成品总重量为{{ weight }}</p>
                        </el-form-item>
                        <el-form-item label="次品商品名称">
                            <el-input v-model="formData.name" style="width: 320px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="数量">
                            <el-input v-model="formData.num" style="width: 320px" :disabled="true"></el-input>
                            <p>当前选择次品总重量为{{ formData.num }}</p>
                        </el-form-item>
                        <el-form-item label="单位">
                            <el-select v-model="formData.unitid" placeholder="请选择" style="width: 320px">
                                <el-option v-for="item in unit" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="仓库">
                            <el-select v-model="formData.storehouseid" placeholder="请选择" style="width: 320px">
                                <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="add">添加</el-button>
                            <el-button type="info" @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>

            <!-- 修改表单 -->
            <el-dialog title="修改成品入库单" :visible.sync="amendVisible" width="30%">
                <div>
                    <el-form label-width="80px" :model="formData">
                        <el-form-item label="商品名">
                            <el-input placeholder=" " v-model="formData.name" :disabled="true">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="原材料批次">
                            <el-input v-model="formData.yno" style="width: 320px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="入库编号">
                            <el-input v-model="formData.no" style="width: 320px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="数量">
                            <el-input v-model="formData.num" style="width: 320px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="计量单位">
                            <el-input v-model="formData.unitid" style="width: 320px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="仓库">
                            <el-select v-model="formData.storehouseid" placeholder="请选择" style="width: 320px">
                                <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="amend">修改</el-button>
                            <el-button type="info" @click="abandon">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </el-main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [],
            //多条件查询
            formData: {
                leadid: '',
                no: '',
                employeeid: '',
                status: '',
                num: '',
                storehouseid: '',
                unitid: '',
                goodsid: '',
                yno: '',
                attritionRate: '',
                // name: '',
            },
            oldForm: {},
            dialogVisible: false,
            amendVisible: false,
            page: 1,
            size: 5,
            total: 0,
            totalPage: 0,
            warehouse: [],
            name: [],
            unit: [],
            weight: null,
            allWeight: null,
            newNum: null,

        };
    },
    mounted() {
        //查找原料单数据
        this.getData()
        //仓库
        this.$axios.get("/material/warehouse").then(res => {
            this.warehouse = res.data.data
        })
        //添加时编号
        this.$axios.get("/secondWare/findNo").then(res => {
            console.log(res.data.data);
            this.name = res.data.data
        })
        this.$axios.get("/matReq/findUnit").then(res => {
            console.log(res.data.data);
            this.unit = res.data.data
        })
        //管理员
        this.$axios.get("/employee/employeeList").then(res => {
            console.log(res.data.data);
            this.employee = res.data.data
        })
    },
    methods: {
        getWarehouseName(id) {
            const warehouse = this.warehouse.find(item => item.id === id);
            return warehouse ? warehouse.name : null;
        },
        getEmployeeName(id) {
            const emplo = this.employee.find(item => item.id === id);
            return emplo ? emplo.name : null;
        },
        getUnitName(id) {
            const unit = this.unit.find(item => item.id === id);
            return unit ? unit.name : null;
        },
        
        //分页
        handleSizeChange(val) {
            //改变页面数据条数时的事件
            this.size = val
            this.getData(val)
        },
        handleCurrentChange(val) {
            //改变页数时的事件
            this.page = val
            this.getData(val)
        },
        getData() {
            this.$axios
                .get("/secondWare/findAll/" + this.page + "/" + this.size)
                .then((res) => {
                    let resPage = res.data.data;
                    //
                    this.page = resPage.curPage;
                    // this.size = resPage.size;
                    this.total = resPage.total;
                    this.totalPage = resPage.totalPage;
                    this.tableData = resPage.data;
                });
        },
        //多条件查询
        find() {
            console.log("这是formData的值：" + JSON.stringify(this.formData));
            this.$axios.post("/secondWare/findterm/" + this.page + "/" + this.size, this.formData).then(res => {
                let resPage = res.data.data;
                //
                this.page = resPage.curPage;
                // this.size = resPage.size;
                this.total = resPage.total;
                this.totalPage = resPage.totalPage;
                this.tableData = resPage.data;
            })
        },
        //清空
        empty() {
            this.formData = {}
            this.getData()
        },
        //审批
        pass(row) {
            console.log(row.attritionRate);
            this.$axios.post("/secondWare/upStatus/" + row.id + "/" 
            +row.leadid + "/" + row.goodsid + "/" +row.attritionRate +"/" + row.num).then(res => {
                this.getData()
            })
        },
        changeing() {
            this.name.forEach(async (item) => {
                if (item.no == this.formData.no) {
                    this.formData.name = item.name;
                    this.formData.leadid = item.id;
                    this.allWeight = item.num;

                    try {
                        const res = await this.getWeightData(item.id);
                        this.weight = res.data.data;
                        console.log(this.weight);
                        this.formData.num = this.allWeight - this.weight;
                    } catch (error) {
                        console.error(error);
                    }
                }
            });
        },
        getWeightData(id) {
            return new Promise((resolve, reject) => {
                this.$axios
                    .get("/secondWare/weight/" + id)
                    .then((res) => {
                        resolve(res);
                    })
                    .catch((error) => {
                        reject(error);
                    });
            });
        },
        //添加
        add() {
            // console.log("数据类型" + typeof this.formData.num,typeof this.weight,typeof this.allWeight);
            var num = parseInt(this.formData.num);
            if (num + this.weight <= this.allWeight) {
                this.formData.attritionRate = this.formData.num / this.allWeight
                this.$axios.post("/secondWare/add", this.formData).then(res => {
                    if (res.data.data == true) {
                        console.log("成功");
                        this.dialogVisible = false;
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.getData;
                        this.formData = {};
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'warning'
                        });
                    }
                })
                this.weight = null;
                this.allWeight = null;
            } else {
                this.$message({
                    message: '库存不足',
                    type: 'warning'
                });
            }
            this.getData()


        },
        //修改
        edit(row) {
            this.amendVisible = true;
            this.formData = row;
            this.name.forEach(item => {
                if (item.id == this.formData.leadid) {
                    this.formData.yno = item.no
                }
            });
            this.amendVisible = true;
            this.formData = { ...row };
            this.formDataBackup = { ...row };
        },
        //放弃修改
        abandon() {
            this.amendVisible = false;

            this.formData = { ...this.formDataBackup };
            this.formDataBackup = {}; // 清空备份数据
            this.formData = {};

        },
        amend() {
            this.$axios.post("/secondWare/update", this.formData).then(res => {
                if (res.data.data = true) {
                    this.amendVisible = false
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.formData = {};
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'warning'
                    });
                }
            })
            this.getData()
        },
        deleteItem(row) {
            this.$axios.delete("/secondWare/delete/" + row.id + "/" + row.num + "/" + row.leadid).then(res => {
                this.$message({
                    message: '删除成功',
                    type: 'warning'
                });
            })
            this.getData()
        }


    },
};
</script>
<style scoped>
.row-with-margin {

    margin-bottom: 10px;
}

.main {
    background-color: white;
}
</style>